<template>
  <div class="header">
    <p class="title">京东秒杀</p>
    <p class="hourZero">{{_hour}}点专场</p>
    <!-- 倒计时组件 -->
    <van-count-down :time="_time">
  <template #default="timeData">
    <span class="block">{{formatTime(timeData.hours)}}</span>
    <span class="colon">:</span>
    <span class="block">{{formatTime(timeData.minutes)}}</span>
    <span class="colon">:</span>
    <span class="block">{{formatTime(timeData.seconds)}}</span>
  </template>
</van-count-down>
  </div>
  <!-- 商品滑动展示 -->
 <van-swipe :loop="false" :width="110"  :show-indicators="false">
  <van-swipe-item v-for="(item,index) in secdata" :key="index" :width="110">
  <img :src="item.img1" alt="" class="image">
  </van-swipe-item>
</van-swipe>
</template>

<script setup lang="ts">
// 引入接口
import{seckillfn}from "../../api/home"
import{ref,reactive,computed} from 'vue'
// 定义参数类型
interface aa{
    count:number,
    limitNum:number
}
// 获取参数
const value:aa={
     count:1,
     limitNum:6
}
// 获取秒杀列表信息
const secdata:any=ref([{}])
seckillfn(value).then((res:any)=>{
    console.log(res);
    secdata.value=res.data 
})
// 定义时间格式,如果是一位数自动补零
const formatTime = computed(() => (num: number) => {
    return num < 10 ? '0' + num : num
})
// 定义获取倒计时时间
    const _hour = ref(0)
    const _time = ref(0)

    const date = new Date()
    let hour = date.getHours()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()
    if (hour % 2 === 0) {
        hour += 2
    } else {
        hour += 1
    }
    // 用于显示几点场
    _hour.value = hour - 2
    if (hour === 24) {
        hour = 0
        day += 1
        // 你要是不知道13578十腊，我看你这个ios兼容怎么写
        if (
            (day === 31 && [1, 3, 5, 7, 8, 10, 11].indexOf(month) === -1) ||
            (day === 32 && [1, 3, 5, 7, 8, 10, 11].indexOf(month) !== -1)
        ) {
            day = 1
            month += 1
            if (month === 13) {
                month = 1
                year += 1
            }
        }
    }
    // 计算剩余时间的数字
    _time.value = new Date(`${year}/${month}/${day} ${hour}:00:00`).getTime() - date.getTime()
</script>
<style scoped>
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
  .header{
      display: flex;
      justify-content: space-around;
      align-items: center;
  }
  .hourZero{
      color: red;
      font-weight: 600;
  }
  .title{
      font-weight: 600;
  }
  .image{
      width: 100px;
      height: 100px;
  }
</style>